<template>
  <div style="margin-top:30px">
    <!-- <vxe-toolbar id="outboundId" :setting="{storage: true}" export :refresh="{query: getInventory}">
      <template v-slot:buttons>
        <el-button @click="getInventory">查询</el-button>
      </template>
    </vxe-toolbar> -->
    <el-form ref="form" :model="form" label-width="80px"  >
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-button  @click="funcChoose(form.code)">选择入驻商</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="500"
      :loading="loading"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
    >
      <template v-slot:empty>
        <p> </p>
      </template>
      <vxe-table-column field="shipmentName" title="入驻商名称" min-width="180" />
      <vxe-table-column field="phone" title="手机号" min-width="180" />
      <vxe-table-column field="useOms" title="使用OMS" :formatter="formatterUseOms" min-width="80" />
      <vxe-table-column title="操作"  min-width="100" >
        <template slot-scope="scope" >
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.code)">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />


    <vxe-modal v-model="modelChooseShipmentFlag" title="选择入驻商" width="800" height="730" resize>
      <chooseShipment ref="chooseShipmentRef" @fatherChooseMethod="fatherChoose" />
    </vxe-modal>

  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import {warehouseShipmentDelete, warehouseDetail, warehouseShipmentList} from '@/api/basicInfo'

import chooseShipment from './chooseShipment.vue'

Vue.use(VXETable)
export default {
  name: 'WarehouseShipment',
  components: {
    chooseShipment
  },
  data() {
    return {
      modelChooseShipmentFlag: false,
      form: {
        address: '',        //地址
        city: '',           //市
        code: '',           //数据标识
        contacts: '',       //联系人
        country: '',        //国家
        county: '',         //县/区
        email: '',          //邮箱
        fax: '',            //传真
        groupCode: '',      //所属组织
        landlineNumber: '', //联系人号码
        latitude: '',       //维度
        longitude: '',      //经度
        name: '',           //仓库名称
        phoneNumber: '',    //手机号码
        province: '',       //省
        remarks: '',        //备注
        serialNumber: '',   //仓库代码
        status: '',         //状态
        type: '',           //仓库类型
      },
      listQuery: {
        warehouseCode: '',           //数据标识
        total: 0,          //总数
        pageNum: 1,
        pageSize: 10,
        sortField: '',
        sortType: '',
      },
      optionType: '',
      loading: false,

      tableData: []
    }
  },
  created() {


  },
  methods: {
    // 删除方法
    funcDelete(row) {
      this.$confirm('确认删除吗？').then(_ => {
        warehouseShipmentDelete(row).then(response => {
          this.$message({message: response.msg, type: 'success'})
          this.findWarehouseShipmentList(this.listQuery.warehouseCode)
        })
      }).catch(_ => {
      })
    },
    // 增加组件的父方法
    fatherChoose() {
      this.modelChooseShipmentFlag = false
      this.findWarehouseShipmentList(this.listQuery.warehouseCode)
    },

    // 添加方法
    funcChoose(warehouseCode) {
      this.$refs.chooseShipmentRef.warehouseCode = warehouseCode;    //重置
      this.$refs.chooseShipmentRef.findList();    //重置
      this.modelChooseShipmentFlag = true
    },

    //获取列表
    findWarehouseShipmentList(warehouseCode) {
      this.listQuery.warehouseCode = warehouseCode;
      this.loading = true
      return warehouseShipmentList(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
        this.loading = false
      })
    },

    // 获取页面信息
    getInfo(code) {
      warehouseDetail(code).then(response => {
        this.form = response.data
      })
    },


    // 提交
    funcSubmit() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      this.$emit('fatherAddMethod', selectRecords)

    },
      // 分页handle
      handlePageChange({currentPage, pageSize}) {
        this.listQuery.pageNum = currentPage
        this.listQuery.pageSize = pageSize
        this.findWarehouseShipmentList(this.listQuery.warehouseCode)
      },

    // 取消
    funcCancel() {
      if (this.optionType == 'edit') {
        this.$emit('fatherCancelMethod', 'edit')
      } if (this.optionType == 'add') {
        this.$emit('fatherCancelMethod', 'add')
      }
    },
    formatterUseOms ({ cellValue }) {
      const useOmsList = [
        { label: '否', value: 0 },
        { label: '是', value: 1 }
      ]
      return useOmsList[cellValue].label || cellValue
    },
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
